<template>
  <m-window-frame
    :title="$t('设置')"
    style="height: 100%"
    :okLoading="saveLoading"
    :ok-text="$t('确 定')"
    :cancel-text="$t('关 闭')"
    class="v-ChinaSouth-ZY-setting"
    @cancel="handleCancel"
    @ok="handleSave"
  >
    <div class="ChinaSouth-ZY-setting-container">
      <el-form
        ref="ruleFormRef"
        :rules="rules"
        :model="form"
        label-width="85px"
        :hide-required-asterisk="true"
      >
        <el-form-item :label="$t('类型')">
          <el-row :gutter="12">
            <el-col
              :span="24"
              class="interface-path-box"
            >
              <el-radio-group
                v-model="form.type"
                class="ml-4"
              >
                <el-radio
                  label="file"
                  size="large"
                >
                  可执行文件的名称或路径
                </el-radio>
                <el-radio
                  label="shell"
                  size="large"
                >
                  命令
                </el-radio>
              </el-radio-group>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item
          :label="$t(form.type === 'file' ? '文件地址' : '命令')"
          prop="command"
        >
          <el-row :gutter="12">
            <el-col
              :span="24"
              class="interface-path-box"
            >
              <el-input v-model="form.command"></el-input>
              <img
                v-show="form.type === 'file'"
                src="statics/icons/app/iconmore.png"
                class="_btn"
                @click="changePath"
              />
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item
          :label="$t('参数')"
          prop="params"
        >
          <el-row :gutter="12">
            <el-col :span="24">
              <el-input v-model="form.params"></el-input>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </div>
  </m-window-frame>
</template>
<script lang="ts" setup>
import MWindowFrame from "@/common/ipcWindow/WindowFrame.vue";
import { ref, reactive, watch } from "vue";
import { Params, CloseData } from "./index";
import type { FormInstance, FormRules } from "element-plus";
import { ipcWindowUtil } from "@/mdesign-lib/mdesign-app.umd.js";
import { localFile } from "@/mdesign-lib/mdesign-app.umd.js";
import { useRoute } from "vue-router";

const form = reactive({
  command: "",
  params: "",
  type: "file"
});

const rules = reactive<FormRules>({
  command: { required: true, trigger: "blur", message: "请选择文件路径" }
});

const saveLoading = ref(false);
const ruleFormRef = ref<FormInstance>();

const route = useRoute();
watch(
  () => route.fullPath,
  () => {
    const routeQuery = route.query as unknown;
    const query = routeQuery as Params;
    form.command = query.command || "";
    form.params = query.params || "";
    form.type = query.type || "file";
  },
  { immediate: true }
);

const changePath = () => {
  localFile
    .chooseFile({
      title: "选择文件位置",
      defaultPath: form.command
    })
    .then(({ files }) => {
      if (files[0]?.path) {
        form.command = files[0]?.path;
      }
    });
};

const handleSave = async () => {
  if (!ruleFormRef.value) return;
  const valid = await ruleFormRef.value.validate();
  if (!valid) return;
  handleclose({ success: true, command: form.command, params: form.params, type: form.type });
};

function handleclose(data: CloseData) {
  saveLoading.value = false;
  ipcWindowUtil.closeWindow(data);
}
function handleCancel() {
  handleclose({ success: false });
}
</script>
<style lang="scss">
.v-ChinaSouth-ZY-setting {
  flex: 1;
  display: flex;
  overflow: hidden;
  .ChinaSouth-ZY-setting-container {
    flex: 1;
    overflow: hidden;
    padding: 32px;
    .el-form-item {
      height: 32px;
      margin-bottom: 14px;
      .el-form-item__label {
        line-height: 32px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .el-input__wrapper {
        border: 1px solid rgba(0, 0, 0, 0.15);
        box-shadow: none;
        input {
          height: 24px;
        }
      }
      .el-select {
        width: 100%;
        .el-select__icon {
          transform: rotate(0);
          width: 20px;
        }
      }
      .el-button {
        border-color: rgba(0, 0, 0, 0.15);
        padding: 8px;
        border-radius: 0;
        &:hover {
          border-color: var(--md-primary-color);
        }
      }
      .ownerBox {
        height: 28px;
        border: 1px solid rgba(0, 0, 0, 0.15);
        position: relative;
        padding-left: 7px;
        padding-right: 34px;
        ._btn {
          position: absolute;
          display: inline-block;
          cursor: pointer;
          top: 50%;
          right: 7px;
          transform: translateY(-50%);
        }
      }
    }

    .el-row {
      width: 100%;
      .el-col {
        height: 32px;
        display: flex;
        align-items: center;
      }
    }
    .interface-path-box {
      position: relative;
      .el-input__wrapper {
        padding-right: 34px;
      }
      ._btn {
        position: absolute;
        display: inline-block;
        cursor: pointer;
        top: 50%;
        right: 14px;
        transform: translateY(-50%);
      }
    }
  }
}
</style>
